<template>
  <div>
    <a-modal :bodyStyle="{ padding: '20px' }" title="查看设备信息" :visible="show" :footer="null" @cancel="close" :width="560"
      centered>
      <badge :pdbt="12" :left="0" text="设备信息" />
      <a-row class="see_row" :gutter="20">
        <a-col :span="12">
          <span class="title-label">设备编号：</span>
          {{ params.deviceNo || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">SN号：</span>
          {{ params.snNo || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">设备品牌：</span>
          {{ params.brandName || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">设备型号：</span>
          {{ params.modelName || '-' }}
        </a-col>
        <a-col :span="12">
          <div class="flex_start" v-if="params.onlineStatus == 1">
            <span class="title-label">设备状态：</span>
            <div class="yuan green"></div>
            <div>在线</div>
          </div>
          <div class="flex_start" v-if="params.onlineStatus == 2">
            <span class="title-label">设备状态：</span>
            <div class="yuan red"></div>
            <div>不在线</div>
          </div>
          <div class="flex_start" v-if="params.onlineStatus == 0">
            <span class="title-label">设备状态：</span>
            {{ '/' }}
          </div>
        </a-col>
        <a-col :span="12">
          <span class="title-label">最近心跳时间：</span>
          {{ params.lastHeartbeatTime || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">最后登录时间：</span>
          {{ params.lastLoginTime || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">添加时间：</span>
          {{ params.createTime || '-' }}
        </a-col>
      </a-row>
      <badge :pdbt="12" :left="0" text="关联信息" />
      <a-row class="see_row" :gutter="20">
        <a-col :span="12" style="margin-bottom:10px">
          <span class="title-label">关联状态：</span>
          <a-tag v-if="params.associatedStatus === 1" class="color_orange">
            已分配
          </a-tag>
          <a-tag v-if="params.associatedStatus === 2" class="color_lightBlue">
            待关联
          </a-tag>
          <a-tag v-if="params.associatedStatus === 3" class="color_green">
            已关联
          </a-tag>
        </a-col>
        <a-col :span="12">
          <span class="title-label">关联时间：</span>
          {{ params.associatedTime || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">关联车牌：</span>
          {{ params.licensePlateNo || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">关联车架号：</span>
          {{ params.vinNo || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">分配时间：</span>
          {{ params.allocateTime || '-' }}
        </a-col>
      </a-row>
      <badge :pdbt="12" :left="0" text="启/停用信息" v-if="params.enableStatus != 2" />
      <a-row class="see_row" :gutter="20" v-if="params.enableStatus != 2">
        <a-col :span="12">
          <div class="flex_start" v-if="params.enableStatus == 1">
            <span class="title-label">启用状态：</span>
            <div class="yuan green"></div>
            <div>已启用</div>
          </div>
          <div class="flex_start" v-if="params.enableStatus == 0">
            <span class="title-label">启用状态：</span>
            <div class="yuan red"></div>
            <div>已停用</div>
          </div>
        </a-col>
        <a-col :span="12" v-if="params.enableStatus == 1">
          <span class="title-label">启用时间：</span>
          {{ params.enableTime || '-' }}
        </a-col>
        <a-col :span="12" v-if="params.enableStatus == 0">
          <span class="title-label">停用时间：</span>
          {{ params.enableTime || '-' }}
        </a-col>
        <a-col :span="24" v-if="params.enableStatus == 0">
          <span class="title-label">停用编号：</span>
          {{ params.deactivateNo || '-' }}
        </a-col>
        <a-col :span="24" v-if="params.enableStatus == 0">
          <span class="title-label">停用原因：</span>
          {{ params.deactivateReason || '-' }}
        </a-col>
      </a-row>

      <badge :pdbt="12" :left="0" text="报废信息" v-if="params.enableStatus == 2" />
      <a-row class="see_row" :gutter="20" v-if="params.enableStatus == 2">
        <a-col :span="12">
          <div class="flex_start" v-if="params.enableStatus == 2">
            <span class="title-label">启用状态：</span>
            <div class="yuan orange"></div>
            <div>已报废</div>
          </div>
        </a-col>
        <a-col :span="12">
          <span class="title-label">报废时间：</span>
          {{ params.scrapTime || '-' }}
        </a-col>
        <a-col :span="12">
          <span class="title-label">报废人员：</span>
          {{ params.scrapUserName || '-' }}
        </a-col>
        <a-col :span="24">
          <span class="title-label">报废原因：</span>
          {{ params.scrapReason || '-' }}
        </a-col>
      </a-row>

      <template v-if="params.brandId === 996">
        <badge :pdbt="12" :left="0" text="设备状态信息" />
        <a-row class="see_row" :gutter="20">
          <a-col :span="12">
            <span class="title-label">过期时间：</span>
            {{ params.expirationTime || '-' }}
          </a-col>
          <a-col :span="12">
            <div class="flex_start" v-if="params.deviceStatus == 1">
              <span class="title-label">状态：</span>
              <div class="yuan green"></div>
              <div>正常</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 2">
              <span class="title-label">状态：</span>
              <div class="yuan red"></div>
              <div>停机</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 3">
              <span class="title-label">状态：</span>
              <div class="yuan gary"></div>
              <div>待激活</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 4">
              <span class="title-label">状态：</span>
              <div class="yuan blue"></div>
              <div>冻结</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 5">
              <span class="title-label">状态：</span>
              <div class="yuan gray"></div>
              <div>销号</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 6">
              <span class="title-label">状态：</span>
              <div class="yuan gray"></div>
              <div>沉默期</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 7">
              <span class="title-label">状态：</span>
              <div class="yuan gray"></div>
              <div>测试期</div>
            </div>
            <div class="flex_start" v-if="params.deviceStatus == 8">
              <span class="title-label">状态：</span>
              <div class="yuan gray"></div>
              <div>停机保号</div>
            </div>
            <div class="flex_start" v-if="!params.deviceStatus">
              <span class="title-label">状态：</span>
              {{ '-' }}
            </div>
          </a-col>
          <a-col :span="12">
            <span class="title-label">ICCID：</span>
            {{ params.iccid || '-' }}
          </a-col>
        </a-row>
      </template>

    </a-modal>
  </div>
</template>

<script>
import badge from '@/components/badge'
import { deviceDetail } from '@/services/deviceManament'
export default {
  components: {
    badge
  },
  data () {
    return {
      show: false,
      params: {}
    }
  },
  methods: {
    onInitial (row) {
      console.log(row.id)
      this.getDeviceDetail(row.id)
      // this.params = row
      // this.queryParams = {
      //   memberId: row.id,
      //   phoneOld: row.phone
      // }
      this.show = true
    },
    async getDeviceDetail (id) {
      const res = await deviceDetail(id)
      if (res.isSuccess) {
        this.params = res.data
      }
    },
    close () {
      this.show = false
    }
  }

}
</script>

<style></style>
